<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { Refresh } from '@element-plus/icons-vue';
import { userApi } from '../services/api';

const userInfo = ref({
  username: '',
  created_at: ''
});
const loading = ref(false);

// 获取当前用户信息
const loadUserInfo = async () => {
  loading.value = true;
  try {
    // 从localStorage获取用户信息
    const storedUser = localStorage.getItem('userInfo');
    if (storedUser) {
      const user = JSON.parse(storedUser);
      userInfo.value = {
        username: user.username || '未知用户',
        created_at: user.created_at || new Date().toISOString()
      };
    } else {
      // 如果localStorage中没有，尝试从API获取
      const response = await userApi.getCurrentUser();
      if (response) {
        userInfo.value = {
          username: response.username || '未知用户',
          created_at: response.created_at || new Date().toISOString()
        };
        // 保存到localStorage
        localStorage.setItem('userInfo', JSON.stringify(userInfo.value));
      }
    }
  } catch (error) {
    ElMessage.error('获取用户信息失败');
    console.error('Failed to load user info:', error);
  } finally {
    loading.value = false;
  }
};

// 初始加载
onMounted(() => {
  loadUserInfo();
});

// 刷新用户信息
const handleRefresh = () => {
  loadUserInfo();
};

// 格式化日期
const formatDate = (dateString) => {
  try {
    const date = new Date(dateString);
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    });
  } catch (e) {
    return dateString || '-';
  }
};
</script>

<template>
  <div class="profile">
    <!-- 页面标题和操作按钮 -->
    <div class="page-header">
      <h2>个人中心</h2>
      <el-button type="primary" @click="handleRefresh" :icon="Refresh">
        刷新
      </el-button>
    </div>
    
    <!-- 用户信息卡片 -->
    <el-card v-loading="loading" class="user-info-card">
      <template #header>
        <div class="card-header">
          <span>用户基本信息</span>
        </div>
      </template>
      
      <div class="info-content">
        <div class="info-item">
          <div class="info-label">用户名</div>
          <div class="info-value">{{ userInfo.username || '-' }}</div>
        </div>
        
        <div class="info-item">
          <div class="info-label">账号创建时间</div>
          <div class="info-value">{{ formatDate(userInfo.created_at) }}</div>
        </div>
        
        <div class="info-item">
          <div class="info-label">登录状态</div>
          <div class="info-value">
            <el-tag type="success">已登录</el-tag>
          </div>
        </div>
      </div>
    </el-card>
    
    <!-- 系统信息卡片 -->
    <el-card class="system-info-card">
      <template #header>
        <div class="card-header">
          <span>系统信息</span>
        </div>
      </template>
      
      <div class="info-content">
        <div class="info-item">
          <div class="info-label">系统版本</div>
          <div class="info-value">1.0.0</div>
        </div>
        
        <div class="info-item">
          <div class="info-label">当前时间</div>
          <div class="info-value">{{ formatDate(new Date().toISOString()) }}</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.profile {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #303133;
  font-size: 20px;
}

.user-info-card,
.system-info-card {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  width: 120px;
  color: #606266;
  font-weight: 500;
}

.info-value {
  flex: 1;
  color: #303133;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .info-label {
    width: auto;
  }
}
</style>